<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
	name: 'ChartBar',
	props: {
		value: Object,
		text: String,
		subtext: String,
	},
	mounted() {
		this.$nextTick(() => {
			let xAxisData = Object.keys(this.value)
			let seriesData = Object.values(this.value)
			let option = {
				title: {
					text: this.text,
					subtext: this.subtext,
					x: 'center',
				},
				xAxis: {
					type: 'category',
					data: xAxisData,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						data: seriesData,
						type: 'bar',
					},
				],
			}
			let dom = echarts.init(this.$refs.dom, 'tdTheme')
			dom.setOption(option)
		})
	},
}
</script>

<style lang="less">
.charts {
	//
}
</style>
